<template>
	<view class="real-page">

		
		<view class="real-header">
			


		<view class="user-real-status">
			
			<view class="user-real-status-icon">
				<wd-icon name="add-circle" />
			</view>
			
			<view class="user-real-status-top">
				<text>用户未认证</text>
				<text class="user-real-prohibit" @click="clickProhibit">禁止认证</text>
			</view>
			<view class="user-real-status-bottom">
				<text>您可以选择以下方式对其用户认证</text>
			</view>
		</view>

		<view class="user-real-steps">
			<wd-steps align-center dot>
				<wd-step />
				<wd-step />
				<wd-step />
				<wd-step />
			</wd-steps>
		</view>
		
		</view>


		<view class="real-block" v-for="(t,index) in realType" :style="{
			'background':t.background,
			'color':t.color
		}">

			<view class="real-block-header">
				<text class="real-block-header-title">{{t.name}} </text>
				<text class="real-block-header-tips">{{t.tips}}</text>
			</view>

			<view class="real-block-list">
				<view class="real-block-list-li" v-for="(m,mindex) in t.list">
					<image class="real-block-list-li-image" :src="m.image" mode=""></image>
					<view class="real-block-list-li-content">
						<text class="real-block-list-li-content-top">{{m.name}}</text>
						<text class="real-block-list-li-content-bottom">{{m.tips}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>

	<view class="real-footer">
		<text>查看更多认证问题</text>
	</view>

</template>

<script setup>
	import overallRequest from "@/utool/http/http.js"
	import {
		reactive
	} from 'vue'
	import {
		onReady,
		onLoad
	} from "@dcloudio/uni-app"
	const Data = reactive({
		user: null
	})
	const realType = reactive([

		{
			name: "个人认证",
			tips: "适合公众人物、领域专家、影视明星等",
			background: "rgb(249 202 115 / 58%)",
			color: "rgb(235 161 24 / 93%)",
			list: [{
				name: "个人认证",
				tips: "适合公众人物、领域专家、影视明星等",
				image: "https://img1.baidu.com/it/u=2416045115,103677103&fm=253&fmt=auto&app=138&f=JPEG?w=60&h=60"
			}]
		},
		{
			name: "组织认证",
			tips: "适合企业、个体户、国家机构、学校等机构",
			background: "rgb(132 218 253 / 41%)",
			color: "#84dafd",
			list: [{
					name: "个体认证",
					tips: "适合个体工商户申请",
					image: "https://img1.baidu.com/it/u=2416045115,103677103&fm=253&fmt=auto&app=138&f=JPEG?w=60&h=60"
				},
				{
					name: "企业认证",
					tips: "适合企业申请",
					image: "https://img1.baidu.com/it/u=2416045115,103677103&fm=253&fmt=auto&app=138&f=JPEG?w=60&h=60"
				},
				{
					name: "机构认证",
					tips: "适合国家机构、媒体、高校等机构申请",
					image: "https://img1.baidu.com/it/u=2416045115,103677103&fm=253&fmt=auto&app=138&f=JPEG?w=60&h=60"
				}
			]
		}

	])

	onLoad((query) => {
		let {
			user
		} = query

		if (!user) {
			uni.navigateBack()
		} else {
			Data.user = user
			GetRealInfo()
		}
	})

	// 获取认证信息
	function GetRealInfo() {
		let user = Data.user
		let url = "/Manage/realInfo?user=" + user
		overallRequest(url).then(res => {
			console.log(res);
		}).catch(err => {
			console.log(err);
		})
	}

	// 点击禁止认证
	function clickProhibit() {
		let user = Data.user
		let url = "/Manage/ProhibitReal"
		overallRequest(url, {
			method: "POST",
			data: {
				user
			}
		}).then(res => {
			console.log(res);
		}).catch(err => {
			console.log(err);
		})
	}
	// 点击恢复认证资格
	function clickCancelProhibit() {
		let user = Data.user
		let url = "/Manage/CancelProhibitReal"
		overallRequest(url, {
			method: "POST",
			data: {

			}
		}).then(res => {
			console.log(res);
		}).catch(err => {
			console.log(err);
		})
	}
</script>

<style scoped>
	.real-page {
		height: 100%;
	}
	
	.real-header{
		border-bottom: 20rpx solid #c3c3c344;
		background: blue;
	}
	
	.user-real-steps{
		padding: 20rpx;
		align-items: center;
		padding-bottom: 40rpx;
	}

	.user-real-status {
		display: flex;
		flex-direction: column;
		padding: 40rpx 40rpx;
		box-sizing: border-box;
	}
	.user-real-status-icon{
		
	}

	.user-real-status-top {
		font-size: 36rpx;
		display: flex;
		justify-content: space-between;
		gap: 15rpx;
		margin-bottom: 8rpx
	}

	.user-real-prohibit {
		font-size: 32rpx;
		color: #008dd4
	}

	.user-real-status-bottom {
		color: #7a6c6c;
		font-size: 26rpx;
	}

	.real-footer {
		display: flex;
		width: 100%;
		justify-content: center;
		position: fixed;
		bottom: 30rpx;
		font-size: 24rpx
	}

	.real-block {
		padding: 20rpx 20rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
	}

	.real-block-header {
		display: flex;
		flex-direction: column;
		padding: 0rpx 0rpx;
		margin-bottom: 20rpx;
	}

	.real-block-header-tips {
		color: #7a6c6c;
		font-size: 26rpx;
	}

	.real-block-header-title {
		font-size: 36rpx;
		margin-bottom: 5rpx;
		font-weight: bold;

	}

	.real-block-list {
		margin-top: 15rpx;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
		color: #000
	}

	.real-block-list-li {
		display: flex;
		padding: 30rpx 20rpx;
		background: white;
		border-radius: 10rpx;
	}

	.real-block-list-li-image {
		width: 80rpx;
		height: 80rpx;
		margin-right: 18rpx;
	}

	.real-block-list-li-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.real-block-list-li-content-top {
		margin-bottom: 5rpx;
	}

	.real-block-list-li-content-bottom {
		color: #7a6c6c;
		font-size: 24rpx;
	}
</style>